<template>
  <Row :gutter="10">
    <Card>

      <img class="upload-secure-img" src="/images/secure.webp" />

      <Form inline>
        <FormItem>
          <Input
            type="text"
            style="width:600px;"
            :value="fileName" />
        </FormItem>
        <FormItem>
          <Button @click="fileName = ''">
            取消
          </Button>
          <Upload
            style="display: inline-block;"
            action=""
            :show-upload-list="false"
            :before-upload="beforeUpload">
            <Button type="primary">选择...</Button>
          </Upload>
        </FormItem>
      </Form>
      <Button
        size="large"
        shape="circle"
        type="primary"
        icon="ios-cloud-upload-outline"
        @click="submit">
        上传
      </Button>
    </Card>
  </Row>
</template>

<script>
export default {
  name: 'upload',
  data () {
    return {
      fileName: ''
    }
  },
  methods: {
    isPcapFile (name) {
      return name.endsWith('.pcap')
    },
    beforeUpload (file) {
      const name = file.name
      if (this.isPcapFile(name)) {
        this.fileName = name
      } else {
        this.$Notice.warning({
          title: '只能上传Csv文件',
          desc: '只能上传Csv文件，请重新上传'
        })
        return false
      }
      console.log(file)
    },
    submit () {
      this.fileName = ''
      this.$Modal.success({
        title: '提示',
        content: '上传成功'
      })
    }
  }
}
</script>

<style scoped>
.upload-secure-img {
  width: 100%;
  max-height: 600px;
  object-fit: cover;
}
</style>
